<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>审批实例详情</title>
		<style type="text/css">
			body {
				font-family: "french script mt";
				font-size: 13px;
			}
		</style>
		<script src="approvalProcessInstance.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	</body>
</html>
<script type="text/javascript">
	
	class Label{
		constructor(text) {
		    this.element = document.createElement("div");
			this.element.style.color = "#646A73";
			this.element.style.width = 140;
			this.element.innerText = text + "：";
		}
		
		toElement(){
			return this.element;
		}
		
		toString(){
			return this.element;
		}
	}
	
	class Value{
		constructor(text) {
		    this.element = document.createElement("div");
		    this.element.innerText = text;
		}
		
		toElement(){
			return this.element;
		}
	}
	
	/**
	 * 组件
	 */
	class Component {
		constructor(struct) {
			this.data = struct;
			this.element = document.createElement("div");
			this.element.style.height="20px"
		}

		build() {
			let label = new Label(this.data.name);
			let labelElement = label.toElement();
			labelElement.style.float = "left";
			this.element.appendChild(labelElement);

			let val = new Value(this.data.value);
			let valElement = val.toElement();
			valElement.style.float = "left";
			this.element.appendChild(valElement);
			return this.element;
		}

		toElement() {
			switch (this.data.type) {
				case "date":
					return this.build();
				case "radioV2":
					return this.build();
				case "contact":
					return this.build();
				case "amount":
					return new Amount(this.data).toElement();
				case "fieldList":
					return new FieldList(this.data).toElement();
			}
			return this.build();
		}
	}

	class Amount {
		constructor(struct) {
			this.data = struct;
			this.element = document.createElement("div");
			this.element.style.overflow="hidden"
		}

		toElement() {
			let label = new Label(this.data.name);
			let labelElement = label.toElement();
			labelElement.style.float="left";
			this.element.appendChild(labelElement);

			let val = document.createElement("div");
			val.innerText = this.data.value;
			val.style.color = "#DC9B03";
			val.style.fontSize = "20px"
			val.style.float = "left"
			this.element.appendChild(val);
			return this.element;
		}
	}

	class FieldList {
		constructor(struct) {
			this.data = struct;
			this.element = document.createElement("div");
			this.element.style.overflow="hidden"
		}
		buildLabel() {
			let label = new Label(this.data.name);
			this.element.appendChild(label.toElement());
		}

		toElement() {
			this.buildLabel();
			//构造右侧内容
			let value = document.createElement("div");
			value.style.borderWidth = 1;
			value.style.color = "#646A73"
			value.style.borderColor = "#CCCCCC"
			value.style.borderStyle = "solid"
			value.style.marginLeft = "60px"
			value.style.maxWidth = "300px"
			value.style.float="left";
			value.style.backgroundColor = "#F5F6F7"

			var innerList = this.data.value[0];
			for (var i = 0; i < innerList.length; i++) {
				let s = innerList[i];
				let e = new Component(s)
				value.appendChild(e.toElement());
			}
			this.element.appendChild(value)
			return this.element;
		}
	}


	var form = JSON.parse(source.data.form);
	for (var i = 0; i < form.length; i++) {
		let struct = form[i];
		let element = new Component(struct);
		document.body.appendChild(element.toElement());
	};
</script>
